<html>
<style>
.ggTickLine {
  position: absolute; top: 260px;  left: 0px; width: 500px; height: 25px;
  font-size: 10px;  background: #f2f2f2; color: #666;
  border-top: 1px solid #ddd;
}
.ggTimeLine {
  position: absolute; top: 14px;  left: 3px; width: 494px; height: 4px;
  font-size: 4px;  background: #fdfdfd; border: 1px solid #ddd;
}
.ggTick {
  position: absolute;  width: 0px;  border-left: 1px solid #ccc;
  top: 0px; height: 2px; font-size: 2px;
}
.ggYear {
  font-family: arial; position: absolute; top: 1px; text-align: center;
   width: 20px;
}
.ggSlider {
  background-image: url('slider.png');
  position: absolute; top: -4px; left: 20px; width:25px; height: 13px;
  cursor: pointer;
}
.ggLabel {
  position: absolute; top: 240px; left: 10px; font-size: 15px;
  color: #444; font-family: arial;
}
</style>
<body>
<div id="ggTickLine" class="ggTickLine">
 <div id="ggTimeLine" class="ggTimeLine">
  <div id="ggSlider" class="ggSlider" 
   onmousedown="ggMouseDown(event);" > 
  </div>
 </div>
</div>

<div id="ggLabel" class="ggLabel">2008</div>

<script src="timeline.js" />
</body>
